<template>
  <view class="login">
    <view class="logo">
      <image src="../../static/images/1669955077128.jpg" mode=""></image>
    </view>
    <!-- <text class="title">514头条</text> -->
    <view class="form">
      <u--form ref="uForm" errorType="border-bottom" labelPosition="left" :model="model1" :rules="rules">
        <u-form-item class="test" label="邮箱" labelWidth="auto" borderBottom prop="userInfo.email">
          <u--input v-model="model1.userInfo.email" border="none"></u--input>
          <text class="hz">@qq.com</text>
        </u-form-item>
        <u-form-item class="test" label="密码" labelWidth="auto" borderBottom prop="userInfo.pwd">
          <u--input v-model="model1.userInfo.pwd" border="none"></u--input>
          <text class="hz" style="color: transparent;">@qq.com</text>
        </u-form-item>
        <!--        <u-form-item class="test" label="验证码" labelWidth="auto" borderBottom prop="userInfo.code">
          <u--input v-model="model1.userInfo.code" border="none"></u--input>
          <u-toast ref="uToast"></u-toast>
          <u-code changeText="x秒后获取" :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
          </u-code>
          <u-button class="btncode" @tap="getCode">{{tips}}</u-button>
        </u-form-item> -->
      </u--form>
      <view @click="clogin" class="btn">
        登录
      </view>
      <text @click="goregister" class="gozc">去注册?发金条!</text>
    </view>

  </view>
</template>

<script>
  import {
    login,
    getcode,
    getuserinfo
  } from '@/api/user.js'
  import {
    mapState,
    mapMutations
  } from "vuex"
  export default {
    data() {
      return {
        tips: '',
        // refCode: null,
        seconds: 30,
        model1: {
          userInfo: {
            email: '',
            pwd: "",
            code: ""
          },
        },
        rules: {
          'userInfo.email': {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (value) {
                return true
              } else {
                uni.$u.toast('请输入邮箱');
                return false;
              }

            },
            message: "邮箱不能为空",
            // 触发器可以同时用blur和change
            trigger: ['blur'],
          },
          'userInfo.pwd': {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (value) {
                return true
              } else {
                uni.$u.toast('请输入密码');
                return false;
              }

            },
            message: "密码不能为空",
            // 触发器可以同时用blur和change
            trigger: ['blur'],
          },
        },
      };
    },
    methods: {
      ...mapMutations("m_login", ["setUserInfo"]),
      codeChange(text) {
        this.tips = text;
      },
      goregister() {
        this.$Router.push("/subpkg/register/register")
      },
      cgetuserinfo() {
        getuserinfo().then(res => {
          if (res) {
            this.setUserInfo(res.data)
          }
        })
      },
      clogin() {
        login({
          email: this.model1.userInfo.email + '@qq.com',
          password: this.model1.userInfo.pwd,
          // code: this.model1.userInfo.code,
        }).then(res => {
          uni.$u.toast(res.msg);
          if (res.code == 200) {
            uni.setStorageSync('token', res.data.token)
            uni.setStorageSync('loginInfo', JSON.stringify({
              email: this.model1.userInfo.email,
              password: this.model1.userInfo.pwd
            }))
            
            uni.showToast({
              title: '登陆成功!',
              icon:"none"
            })
            setTimeout(() => {
              this.$Router.push('/pages/index/index')
            }, 1500)
          }
        }).catch(err => {
          console.log(err);
        })
      },
      getCode() {
        if (!this.model1.userInfo.email) {
          return uni.$u.toast('请先输入您的邮箱地址');
        }
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
          getcode({
            type: "登录验证码",
            email: this.model1.userInfo.email + '@qq.com'
          }).then(res => {
            if (res) {
              uni.hideLoading();
              // 这里此提示会被this.start()方法中的提示覆盖
              // uni.$u.toast(res.msg);
              uni.showToast({
                title: res.msg,
                icon: "none"
              })
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
              if (res.msg == "密码错误") {}
            }
          })

        } else {
          uni.$u.toast('请求繁忙');
        }
      },
      end() {
        // uni.$u.toast('倒计时结束');
      },
      start(val) {
        // uni.$u.toast('倒计时开始');
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .u-form-item__body__left__content__label {
    color: #c00000;
  }

  // /deep/ .u-line {
  //   position: relative;
  //   top: -8rpx;
  //   // height: 8rpx;
  // }

  /deep/ .u-line {
    // border-bottom: 2rpx solid ghostwhite !important;
    transform: none !important;
  }

  /deep/ .uni-input-input {
    color: #c00000;
  }

  /deep/ uni-button:after {
    border: none;
  }

  .gozc {
    display: flex;
    justify-content: flex-end;
    font-size: 22rpx;
  }

  .login {
    width: 100vw;
    height: 100vh;
    background: url('../../static/images/ttt.png') no-repeat;
    background-size: 100% 100%;

    .logo {
      display: flex;
      justify-content: center;
    }

    .hz {
      color: #c00000;
    }

    .title {
      font-size: 40rpx;
      display: flex;
      justify-content: center;
      font-weight: bold;
      margin-top: 20rpx;
      color: white;
    }

    image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 10rpx;
      margin-top: 280rpx;
    }

    .form {
      width: 400rpx;
      height: auto;
      margin: 120rpx auto;
      display: flex;
      justify-content: center;
      color: white;
      font-weight: bold;
      flex-direction: column;
      font-size: 28rpx;
      color: #c00000;

      .btncode {
        width: 180rpx;
        border-radius: 10rpx;
        height: 50rpx;
        color: #c00000;
        background: transparent;
        font-size: 20rpx;
        border: 2rpx solid transparent !important;
      }

      .test {
        color: white !important;
        background-color: transparent;
        border-radius: 40rpx;
        box-sizing: border-box;
        height: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20rpx;
        box-sizing: border-box;
        // margin-bottom: 20rpx;
      }


      .btn {
        width: 200rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        border-radius: 10rpx;
        margin: 60rpx auto;
        font-size: 26rpx;
        text-indent: 20rpx;
        letter-spacing: 20rpx;
        background-color: #c00000;
      }

    }


  }
</style>
